<template>
    <div class="aside-list" :class="{ 'active': active }">
        <span class="truncate">
            <slot></slot>
        </span>
        <el-button class="ml-auto px-1" type="primary" text @click.stop="$emit('edit')">
            <el-icon>
                <Edit />
            </el-icon>
        </el-button>

        <span @click.stop="()=>{}">
            <el-popconfirm title="确认删除?" confirm-button-text="确认" cancel-button-text="取消" @confirm="$emit('delete')">
            <template #reference>
                <el-button type="primary" text>
                    <el-icon>
                        <Close />
                    </el-icon>
                </el-button>
            </template>
        </el-popconfirm>
        </span>
        
    </div>
</template>

<script setup>
defineProps({
    active: {
        type: Boolean,
        default: false
    }
})

//暴露出 修改和删除的事件
defineEmits(["edit", "delete"])
</script>

<style scoped>
.aside-list {
    border-bottom: 1px solid #ca8fec;
    display: flex;
    align-items: center;
    padding: 0 5px;
    cursor: pointer;
}

.aside-list:hover,
.active {
    background-color: #ffe3e3;
}
</style>